<template>
	<view class="zone">
		<Header :title="title[stat]"></Header>
		<view class="main">

			<view class="xianyu">
				<view class="xianyu_tile">
					{{title2[stat]}}余额
				</view>
				<view class="xianyu_num">
					{{stat==1?userinfo.lingshi:stat==2?userinfo.shenshi:stat==3?userinfo.tongqian:userinfo.money}}
				</view>
				<view v-if="stat==1" class="zengs" @click="$p.navto('/pages/index/transferTo')">
					赠送
				</view>
				<view v-if="stat==2" class="zengs" @click="$p.navto('/pages/index/shenshiTreasure')">
					宝库
				</view>
				<view v-if="stat==4" class="zengs" @click="$p.navto('/pages/index/withdrawal')">
					提现
				</view>
				<view v-if="stat==3" class="zengs vis" @click="$p.navto('/pages/index/withdrawal')">
					提现
				</view>
			</view>


			<view class="info">
				<view class="tabs">
					<view :class="['tab',stat==item.id?'act':'']" v-for="(item,index) in tablist" :key="index"
						@click="tabchange(item.id)">
						<text>{{item.name}}</text>
					</view>
				</view>

				<view class="linkbox">
					<view class="title">
						<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix"></image>
						<text>{{title2[stat]}}明细</text>
						<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix"></image>
					</view>


					<scroll-view scroll-y class="scrollbox" @scrolltolower="scrolltolower">
						<view class="item" v-for="(item,index) in listdata[stat]" :key="index">
							<view class="word">
								<p class="name">{{item.create_time}}</p>
								<p class="price">{{item.memo}}</p>
							</view>

							<view :class="[item.operate_type==1?'right':'right2']">
								{{item.operate_type==1?'+':'-'}}{{item.number}} <text v-if="stat == 4">{{item.money}}</text>
							</view>
						</view>

						<view v-if="listdata[stat].length==0" class="empty">
							<image src="http://img.cpgm.cc/xfmz/static/public/empty.png" mode="widthFix" />
							<text class="hui">
								没有数据哦~
							</text>
						</view>
						<u-loadmore v-else :status="status" color="#666" :icon-type="iconType" :load-text="loadText" />

					</scroll-view>


				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tablist: [{
						id: 1,
						name: '灵石',
						title: '灵石明细',
						isrequest: false,
					},
					{
						id: 2,
						name: '神石',
						title: '神石明细',
						isrequest: false,
					},
					{
						id: 3,
						name: '铜钱',
						title: '铜钱明细',
						isrequest: false,
					},
					{
						id: 4,
						name: '零钱',
						title: '零钱明细',
						isrequest: false,
					},
				],
				stat: 1,
				page: [1, 1, 1, 1, 1],
				max_page: [1, 1, 1, 1, 1],
				title: ['', '灵石明细', '神石明细', '铜钱明细', '零钱明细'],
				title2: ['', '灵石', '神石', '铜钱', '零钱'],
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
				listdata: {
					1: [],
					2: [],
					3: [],
					4: [],
					5: [],
				},
				userinfo: ''
			}
		},
		onLoad(options) {
			this.stat = options.id
			this.getOneUser();
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			// 获取个人信息
			async getUserInfo() {
				let res = await this.$http.index.getUserInfo()
				if (res.code == 1) {
					this.userinfo = res.data
				}
			},
			scrolltolower() {
				if (this.page[this.stat] >= this.max_page[this.stat]) {
					this.status = 'nomore'
					return;
				}
				this.status = 'loading';
				this.page[this.stat] = ++this.page[this.stat];
				this.getOneUser();
				setTimeout(() => {
					if (this.page[this.stat] > this.max_page[this.stat] || this.page[this.stat] == this.max_page[
							this.stat]) this.status = 'nomore';
					else this.status = 'loading';
				}, 500)
			},

			// tab切换
			tabchange(id) {
				this.stat = id;
				// console.log(this.stat);
				if (!this.tablist[id - 1].isrequest) {
					this.getOneUser()
				} else if (!this.tablist[id - 1].isrequest) {
					this.getOneUser()
				} else if (!this.tablist[id - 1].isrequest) {
					this.getOneUser()
				}
				if (this.page[this.stat] > this.max_page[this.stat] || this.page[this.stat] == this.max_page[
						this.stat]) this.status = 'nomore';
				else this.status = 'loading';
			},


			// 明细
			async getOneUser() {
				console.log(this.stat);
				if (this.stat == 1) {
					let res = await this.$http.index.getlingshilog({
						page: this.page[this.stat]
					})
					if (res.code == 1) {
						this.listdata[this.stat] = [...this.listdata[this.stat], ...res.data.data]
						this.tablist[this.stat - 1].isrequest = true
						this.max_page[this.stat] = res.data.last_page
						if (this.page[this.stat] > this.max_page[this.stat] || this.page[this.stat] == this.max_page[
								this
								.stat]) this.status =
							'nomore';
					}
				} else if (this.stat == 2) {
					let res = await this.$http.index.getshenshilog({
						page: this.page[this.stat]
					})
					if (res.code == 1) {
						this.listdata[this.stat] = [...this.listdata[this.stat], ...res.data.data]
						this.tablist[this.stat - 1].isrequest = true
						this.max_page[this.stat] = res.data.last_page
						if (this.page[this.stat] > this.max_page[this.stat] || this.page[this.stat] == this.max_page[
								this
								.stat]) this.status =
							'nomore';
					}
				} else if (this.stat == 3) {
					let res = await this.$http.index.gettongqianlog({
						page: this.page[this.stat]
					})
					if (res.code == 1) {
						this.listdata[this.stat] = [...this.listdata[this.stat], ...res.data.data]
						this.tablist[this.stat - 1].isrequest = true
						this.max_page[this.stat] = res.data.last_page
						if (this.page[this.stat] > this.max_page[this.stat] || this.page[this.stat] == this.max_page[
								this
								.stat]) this.status =
							'nomore';
					}
				} else if (this.stat == 4) {
					let res = await this.$http.index.getlingqianlog({
						page: this.page[this.stat]
					})
					if (res.code == 1) {
						this.listdata[this.stat] = [...this.listdata[this.stat], ...res.data.data]
						this.tablist[this.stat - 1].isrequest = true
						this.max_page[this.stat] = res.data.last_page
						if (this.page[this.stat] > this.max_page[this.stat] || this.page[this.stat] == this.max_page[
								this
								.stat]) this.status =
							'nomore';
					}
				}


			},
		}
	}
</script>

<style lang="less">
	.zone {
		min-height: 100vh;
		background: url(http://image.qxgm.site/tdz/img/public/p_bg.png) no-repeat;
		background-size: 100% auto;
	}

	.xianyu {
		text-align: center;
		padding: 20px 0 30px;
		background: url(http://image.qxgm.site/tdz/img/xianyu/mg-01.png) no-repeat;
		background-size: 100% 100%;
	}

	.xianyu_tile {
		font-size: 21px;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 24px;
		background: linear-gradient(0deg, #FFFF99 0%, #FFFDE1 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.hui {
		color: #666;
	}

	.xianyu_num {
		font-size: 30px;
		font-weight: normal;
		color: #FFFFCC;
		line-height: 24px;
		margin-top: 3vh;
	}

	.zengs {
		display: block;
		margin: 3vh auto 0;
		width: 90px;
		height: 37px;
		font-size: 18px;
		font-weight: normal;
		line-height: 37px;
		color: #fef7c8;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
		background-size: 100% 100%;
	}

	.info {

		background: url(http://image.qxgm.site/tdz/img/public/info.png) no-repeat;
		background-size: 100% 100%;
		padding: 18px 10px 20px 10px;
	}

	.title {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 16px;
		background: url(http://image.qxgm.site/tdz/img/xianyu/mg-05.png) no-repeat;
		background-size: 100% 100%;
		padding: 10px 0 8px;

		image {
			width: 18%;
		}

		text {
			font-size: 20px;
			font-weight: normal;
			color: #50463E;
			line-height: 20px;
			margin: 0 13px;
		}
	}

	.tabs {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.tab {
			width: 20%;
			background: url(http://image.qxgm.site/tdz/img/xianyu/mg-04.png) no-repeat;
			background-size: 100% 100%;
			text-align: center;
			padding: 15px 0;

			text {
				word-wrap: break-word;
				/*英文的时候需要加上这句，自动换行*/
				/*自测了这句话没啥用*/
				writing-mode: vertical-rl;
				/*从左向右 从右向左是 writing-mode: vertical-rl;*/
				writing-mode: tb-rl;
				/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
				text-align: center;
				font-size: 18px;
				text-align: center;
				font-weight: normal;
				color: #333333;
				line-height: 24px;
			}
		}

		.act {
			background: url(http://image.qxgm.site/tdz/img/xianyu/mg-03.png) no-repeat;
			background-size: 100% 100%;

			text {
				word-wrap: break-word;
				/*英文的时候需要加上这句，自动换行*/
				/*自测了这句话没啥用*/
				writing-mode: vertical-rl;
				/*从左向右 从右向左是 writing-mode: vertical-rl;*/
				writing-mode: tb-rl;
				/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
				text-align: center;
				font-size: 18px;
				font-weight: normal;
				color: #333333;
				line-height: 24px;
				-webkit-text-stroke: 1px #CB6500;
				background: linear-gradient(180deg, #FBE5BE 0%, #FFFFCC 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
	}

	.linkbox {
		background: url(http://image.qxgm.site/tdz/img/public/p_bg2.png) no-repeat;
		background-size: 100% 100%;
		margin-top: 10px;
		padding: 10px 8px 8px;
	}

	.scrollbox {
		height: calc(100vh - 444px);
		overflow-y: scroll;
	}


	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 3px;
		background: url(http://image.qxgm.site/tdz/img/xianyu/mg-06.png) no-repeat;
		background-size: 100% 100%;
		padding: 17px 20px 17px 17px;
	}

	.name {
		font-size: 14px;
		font-weight: normal;
		color: #333333;
		line-height: 14px;
	}

	.price {
		font-size: 15px;
		font-weight: normal;
		color: #333333;
		line-height: 15px;
		margin-top: 10px;
	}

	.right {
		font-size: 18px;
		font-weight: normal;
		color: #006600;
		line-height: 24px;
	}

	.right2 {
		font-size: 18px;
		font-weight: normal;
		color: #FF0000;
		line-height: 24px;
	}

	.vis {
		visibility: hidden;
	}
</style>